<template>
  <div class="login">
      <el-form
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
      >
        <el-form-item label="账号：">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="formLabelAlign.password" />
        </el-form-item>
      </el-form>
      <el-button type="primary" size="large" style="margin: 100px 0 0 220px;" @click="denglu">登录</el-button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { reactive } from 'vue'
export default {
  name: 'login',
  setup() {
    const $router = useRouter();
    const formLabelAlign = reactive({
      name: '',
      password: '',
    })
    function denglu() {
      console.log("ddd", formLabelAlign.name)
      console.log("ddd", formLabelAlign.password)
      if(formLabelAlign.name && formLabelAlign.password) {
        $router.replace('/home')
      }
    }
    return {formLabelAlign, denglu}
  }

}
</script>

<style>

.login {width: 500px;height: 460px;background: #778899;margin: 100px auto;border-radius: 10px;padding: 150px 0 0 0px;box-sizing: border-box;}
</style>